<template>
    <div class="newsong">

        <div v-if="arr.length == 0">
            <p style="padding: 50px 0; text-align: center; color: #ccc;">暂无歌曲列表~~</p>
        </div>
        <!-- 渲染图片 -->
         <!-- <img src="../assets/img/loading.gif" style="width: 200px;" alt=""> -->
        <!-- <img :src="url"  style="width: 200px;" alt=""> -->
        <!-- <img :src="src"  style="width: 200px;" alt=""> -->
        <!-- <img :src="src"  style="width: 200px;" alt=""> -->

        <!-- 错误写法 -->
        <!-- <img src="{{ url }}"  style="width: 200px;" alt=""> -->

       <div v-else>
            <h3>最新音乐</h3>
            <ul>
                <li v-for="(item) in arr" :key="item.song_id">
                    <router-link :to="{path: '/detail',query: {song_id: item.song_id}}">
                        <div class="left">
                            <h5>{{ item.song_name }}</h5>
                            <div>
                                <i></i>
                                <span>{{ item?.singer_name }} </span>
                                <span>{{ item?.category_name }} </span>
                            </div>
                        </div>
                        <div class="right">
                            <button>
                                <van-icon name="music-o" />
                            </button>
                        </div>
                    </router-link>
                </li>
            </ul>
       </div>
    </div>
</template>

<script>
// 导入接口
import { songItems , host} from '../api/index'
// 写组件的业务逻辑 (option式开发)
export default {
    data() {
        return {
            arr: [],
        }
    },
    // 设置方法的地方
    methods: {
        // 编写获取音乐列表的方法
        async songItemsFn(page=1,pageSize=20) {
            // 等待调用接口
            await songItems({page ,pageSize })
                .then(
                    content => {
                        // 做数据响应式
                        // console.log(content)
                        // 解构赋值
                        let { code, result } = content;
                        if (code == 200) {
                            //映射数组
                            let newArr = result.map(item => {
                                //  整合数据
                                // item.picUrl = host + item.picUrl;
                                item.song_cover_url = host + item.song_cover_url ;
                                item.src = host + item.src ;
                                return item;
                            })
                            // 赋值（响应式）
                            this.arr = newArr;

                            // 把这个音乐列表列表存储在本地
                            // localStorage.setItem("SKY_SONGS", JSON.stringify(newArr));
                            // this.$store.dispatch('addSongFn');
                            this.$store.commit('music/addSong', result)
                            // console.log(this.$store)
                        }
                    }
                )
                .catch(
                    err => {
                        console.log("请求失败，请刷新", err)
                    }
                )
        }
    },
    // 初始化
    async created() {
        // 获取音乐列表
        // this.songItemsFn();
        await this.$store.dispatch('music/addSongFn',{page: 1,pageSize:20});
        this.arr = this.$store.state.music.songs;
        console.log('-----',this.arr)
    }
}
</script>


<style lang="less">
@import '../common/less/varible.less';
.newsong {
    padding: @pad;
    box-sizing: border-box;
    margin-top: 15px;
    h4 {
        font-weight: normal;
        font-size: 18px;
        margin-top: 10px;
    }

    ul {
        li {
            a {
                display: flex;
                width: 100%;
                justify-content: space-between;
                align-items: center;
                // font-family: Arial, Helvetica, sans-serif;
                padding: 10px 0px;
                border-bottom: 1px solid #f0f0f0;

                .left {
                    h5 {
                        font-weight: normal;
                        font-size: 18px;
                        line-height: 175%;
                    }

                    div {
                        font-size: 13px;
                        color: #666;

                        i {
                            display: inline-block;
                            width: 12px;
                            height: 8px;
                            margin-right: 4px;
                            background-image: url(../assets/img/index_icon_2x.png);
                            background-size: 166px 97px;
                        }
                    }
                }

                .right {
                    button {
                        background-color: transparent;
                        color: #ccc;
                    }
                }
            }
        }
    }
}
</style>